<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      root {{ msg }}
    </div>

    <script src="./vue.js"></script>
    <script src="./createElement.js"></script>
    <script src="./createDOMElement.js"></script>
    <script>
      ;(() => {
        new Vue({
          // el: '#app',
          // createElement 用来创建虚拟DOM节点vnode
          render(createElement) {
            // <div id="smd">heheda</div>
            const vnode = createElement('div', { attrs: { id: 'smd' } }, [
              'heheda'
            ])
            console.log(vnode, 'vnode')
            // render函数的返回值，会编译为最终的dom，替换容器节点
            return vnode
          }
        }).$mount('#app')

        
        // <div>
          // heheda
          // <ul>
            // <li>a</li>
            // <li>b</li>
            // <li>c</li>
            // <li>d</li>
          // </ul>
        // </div>
        const vnode = createElement('div', { attrs: { id: 'smd' } }, [
          'heheda',
          createElement('ul', {}, [
            createElement('li', {}, ['a']),
            createElement('li', {}, ['b']),
            createElement('li', {}, ['c']),
            createElement('li', {}, ['d'])
          ])
        ])
        console.log(vnode, 'vnode')

        createDOMElement(vnode)

        console.log(vnode.elm, 'vnode.elm')

        document.body.append(vnode.elm)
      })()
    </script>
  </body>
</html>
